* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.common {
  border: 1px solid #000;
  border-image-source: url('../images/border.png');
  border-image-slice: 41 31 51 107;
  border-width: 41px 31px 51px 107px;
  border-image-width: 41px 31px 51px 107px;
}
.inner {
  position: absolute;
  left: -87px;
  bottom: -40px;
  top: -31px;
  right: -11px;
}
body {
  background-image: url('../images/bg.jpg');
}
@keyframes move {
  to {
    transform: translateY(-50%);
  }
}
.layout {
  min-width: 1024px;
  max-width: 1920px;
  min-height: 780px;
  background: url('../images/logo.png') no-repeat center top;
  margin: auto;
  padding: 80px 10px 0;
  display: flex;
}
.layout .left {
  flex: 3;
  flex-direction: column;
}
.layout .left .sum {
  display: flex;
  position: relative;
  height: 70px;
  margin-bottom: 16px;
}
.layout .left .sum .inner {
  display: flex;
  justify-content: space-around;
}
.layout .left .sum .inner .item h2 {
  padding-top: 15px;
  color: #fff;
  font-size: 22px;
}
.layout .left .sum .inner .item span {
  color: #4f88d1;
  font-size: 12px;
}
.layout .left .fault {
  height: 320px;
  margin-bottom: 16px;
  position: relative;
}
.layout .left .fault .inner .Tab {
  padding: 10px 0;
}
.layout .left .fault .inner .Tab a {
  font-size: 14px;
  padding: 0 12px;
  color: #1950c4;
}
.layout .left .fault .inner .Tab a.active {
  color: #fff;
}
.layout .left .fault .inner .Tab :nth-child(1) {
  border-right: 2px solid #00f2f1;
}
.layout .left .fault .inner .content {
  display: none;
  color: #4f88d1;
}
.layout .left .fault .inner .content .menu {
  padding: 0 20px;
  height: 36px;
  line-height: 36px;
  background-color: #1b1d27;
  text-align: center;
}
.layout .left .fault .inner .content .menu span {
  padding: 0 50px 0 0;
  font-size: 16px;
}
.layout .left .fault .inner .content .list {
  padding: 12px 20px;
  overflow: hidden;
  height: 200px;
}
.layout .left .fault .inner .content .list ul {
  animation: move 9s linear infinite;
}
.layout .left .fault .inner .content .list ul li {
  position: relative;
}
.layout .left .fault .inner .content .list ul li span {
  font-size: 12px;
  padding: 0 55px 0 0;
}
.layout .left .fault .inner .content .list ul li .icon-dot {
  position: absolute;
  display: none;
  left: -13px;
  top: 6px;
}
.layout .left .fault .inner .content .list ul :hover .icon-dot {
  display: block;
}
.layout .left .fault .inner .content .list :hover {
  animation-play-state: paused;
}
.layout .left .census {
  height: 227px;
  position: relative;
}
.layout .left .census .inner {
  display: flex;
  flex-direction: column;
}
.layout .left .census .inner h2 {
  color: #fff;
  font-size: 16px;
  padding: 15px 5px;
}
.layout .left .census .inner .site {
  display: flex;
}
.layout .left .census .inner .site .draw {
  flex: 6;
}
.layout .left .census .inner .site .number {
  flex: 2;
  padding: 12px 10px;
  background-image: url('../images/rect.png');
}
.layout .left .census .inner .site .number .item {
  padding-bottom: 15px;
}
.layout .left .census .inner .site .number .item h3 {
  font-size: 26px;
  color: #fff;
}
.layout .left .census .inner .site .number .item span {
  font-size: 12px;
}
.layout .left .census .inner .site .number :nth-child(2) {
  padding-bottom: 0;
}
.layout .center {
  flex: 4;
  flex-direction: column;
  padding: 36px 20px 0;
}
.layout .center .map {
  margin-bottom: 10px;
  color: #fff;
}
.layout .center .map .city-map {
  height: 382px;
}
.layout .center .graph {
  height: 227px;
  position: relative;
}
.layout .center .graph .inner {
  display: flex;
  flex-direction: column;
}
.layout .center .graph .inner h2 {
  color: #fff;
  font-size: 18px;
  padding: 15px 5px;
}
.layout .center .graph .inner .city-census {
  display: flex;
}
.layout .center .graph .inner .city-census .bar-chart {
  flex: 6;
}
.layout .center .graph .inner .city-census .num {
  flex: 2;
  padding: 12px 10px;
  background-image: url('../images/rect.png');
}
.layout .center .graph .inner .city-census .num .item {
  padding-bottom: 15px;
}
.layout .center .graph .inner .city-census .num .item h3 {
  font-size: 26px;
  color: #fff;
}
.layout .center .graph .inner .city-census .num .item span {
  font-size: 12px;
}
.layout .center .graph .inner .city-census .num :nth-child(2) {
  padding-bottom: 0;
}
.layout .right {
  flex: 3;
  flex-direction: column;
}
.layout .right .data {
  height: 100px;
  margin-bottom: 10px;
  position: relative;
}
.layout .right .data .inner {
  display: flex;
  flex-direction: column;
}
.layout .right .data .inner .time a {
  color: #1950c4;
  padding: 0 8px;
  border-right: 2px solid #00f2f1;
}
.layout .right .data .inner .time a.active {
  color: #fff;
}
.layout .right .data .inner .time :nth-child(4) {
  border-right: 0;
}
.layout .right .data .inner .sell {
  display: flex;
  padding-top: 10px;
  justify-content: start;
}
.layout .right .data .inner .sell .item {
  padding: 0 80px 0 40px;
}
.layout .right .data .inner .sell .item h3 {
  color: #fff;
}
.layout .right .data .inner .sell .item span {
  color: #1950c4;
  font-size: 12px;
}
.layout .right .sales {
  height: 164px;
  margin-bottom: 10px;
  position: relative;
}
.layout .right .sales .inner {
  display: flex;
  flex-direction: column;
}
.layout .right .sales .inner .year {
  display: flex;
  margin-top: 10px;
}
.layout .right .sales .inner .year h2 {
  color: #fff;
  font-size: 20px;
  padding: 0 10px;
  margin-right: 5px;
  border-right: 2px solid #00f2f1;
}
.layout .right .sales .inner .year .l a {
  padding: 0 10px;
}
.layout .right .sales .inner .year .l a.active {
  background-color: #00f2f1;
  color: #fff;
}
.layout .right .sales .inner .line {
  flex: 1;
}
.layout .right .range {
  display: flex;
  height: 164px;
  margin-bottom: 10px;
}
.layout .right .range .spread {
  flex: 1;
  position: relative;
}
.layout .right .range .spread .inner {
  position: absolute;
  left: -87px;
  bottom: -40px;
  top: -31px;
  right: -11px;
}
.layout .right .range .spread .inner h2 {
  font-size: 16px;
  color: #fff;
  padding: 7px 10px;
}
.layout .right .range .spread .inner .sky {
  display: flex;
  flex-wrap: wrap;
}
.layout .right .range .spread .inner .sky .item {
  width: 50%;
  padding: 0 15px;
}
.layout .right .range .spread .inner .sky .item h3 {
  color: #fff;
  font-size: 12px;
}
.layout .right .range .spread .inner .sky .item h3 span {
  font-size: 23px;
  padding-right: 5px;
}
.layout .right .range .spread .inner .sky .item span {
  color: #265698;
  font-size: 12px;
}
.layout .right .range .rate {
  margin-left: 20px;
  flex: 1;
  position: relative;
}
.layout .right .range .rate .inner {
  position: absolute;
  left: -87px;
  bottom: -40px;
  top: -31px;
  right: -11px;
  display: flex;
  flex-direction: column;
}
.layout .right .range .rate .inner h2 {
  color: #1950c4;
  font-size: 16px;
  padding: 8px 6px 0;
}
.layout .right .range .rate .inner .pre {
  position: relative;
  height: 62px;
}
.layout .right .range .rate .inner .pre span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -20%);
  color: #fff;
}
.layout .right .range .rate .inner .pre .circle {
  height: 100%;
}
.layout .right .range .rate .inner .money {
  display: flex;
}
.layout .right .range .rate .inner .money .item h3 {
  font-size: 20px;
  color: #fff;
}
.layout .right .range .rate .inner .money .item span {
  font-size: 12px;
  margin-right: 9px;
  color: #1950c4;
}
.layout .right .rank {
  height: 215px;
  position: relative;
}
.layout .right .rank .inner {
  display: flex;
}
.layout .right .rank .inner .hot {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.layout .right .rank .inner .hot h3 {
  color: #1950c4;
  font-size: 16px;
}
.layout .right .rank .inner .hot span {
  color: #1950c4;
  font-size: 12px;
}
.layout .right .rank .inner .hot span i {
  margin-right: 12px;
}
.layout .right .rank .inner .city {
  display: flex;
  flex-direction: column;
  margin-left: 50px;
  margin-top: 17px;
}
.layout .right .rank .inner .city h3 {
  color: #1950c4;
  font-size: 16px;
}
.layout .right .rank .inner .city .scale {
  margin-top: 10px;
}
.layout .right .rank .inner .city .scale li {
  padding: 6px 0;
  font-size: 12px;
  color: #1950c4;
}
.layout .right .rank .inner .city .scale li span {
  padding-right: 39px;
}
.layout .right .rank .inner .day {
  margin-top: 17px;
}
.layout .right .rank .inner .day h3 {
  color: #1950c4;
  font-size: 16px;
}
.layout .right .rank .inner .day .scale {
  margin-top: 10px;
}
.layout .right .rank .inner .day .scale li {
  padding: 6px 0;
  font-size: 12px;
  color: #1950c4;
}
.layout .right .rank .inner .day .scale li span {
  padding-right: 21px;
}
